<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>水果叠叠乐</title>
  <script src="./js/jquery.min.js"></script>
  <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
  <div id="stars"></div>
  <div id="stars2"></div>
  <div id="stars3"></div>
  <ul id="card">
    <li data-id="1" id="fruit-one">
      <img src="./images/pineapple.svg" alt="" />
    </li>
    <li data-id="1" id="fruit-two">
      <img src="./images/pineapple.svg" alt="" />
    </li>
    <li data-id="2" id="fruit-three">
      <img src="./images/apple.svg" alt="" />
    </li>
    <li data-id="2" id="fruit-four">
      <img src="./images/apple.svg" alt="" />
    </li>
    <li data-id="2" id="fruit-five">
      <img src="./images/apple.svg" alt="" />
    </li>
    <li data-id="1" id="fruit-six">
      <img src="./images/pineapple.svg" alt="" />
    </li>
    <li data-id="3" id="fruit-seven">
      <img src="./images/avocado.svg" alt="" />
    </li>
    <li data-id="3" id="fruit-eight">
      <img src="./images/avocado.svg" alt="" />
    </li>
    <li data-id="3" id="fruit-nine">
      <img src="./images/avocado.svg" alt="" />
    </li>
    <li data-id="4" id="fruit-ten">
      <img src="./images/grapes.svg" alt="" />
    </li>
    <li data-id="4" id="fruit-eleven">
      <img src="./images/grapes.svg" alt="" />
    </li>
    <li data-id="4" id="fruit-twelve">
      <img src="./images/grapes.svg" alt="" />
    </li>
  </ul>
  <!-- 图片位置 -->
  <!-- 卡槽位置 -->
  <div class="fixed">
    <div class="gradient-border" id="box"></div>
  </div>
  <script>
    // cloneNode(true/false) 克隆节点
    // true: 表示深克隆  ||  false: 表示浅克隆
    // appendChild(node)  添加子节点
    let carry = new Array(5).fill(0);

    $("#card li").on("click", function (e) {
      // TODO: 待补充代码
      let box = document.getElementById('box');
      let node = null;
      let boxChilds = document.querySelectorAll("#box li");
      // let boxChilds = box.getElementsByTagName("li");
      if (boxChilds.length >= 7) {
        return;
      }
      // 隐藏元素
      this.style.display = 'none';
      // 添加元素
      if (e.target.nodeName == 'LI') {
        node = e.target.cloneNode(true);
        box.appendChild(node);
      } else if (e.target.nodeName == 'IMG') {
        node = e.target.parentNode.cloneNode(true);
        box.appendChild(node);
      }
      // 在card中显示元素
      boxChilds = document.querySelectorAll("#box li");
      boxChilds.forEach(item => {
        item.style.display = 'inline';
      })
      // for (let item of boxChilds) {
      //   item.style.display = 'inline';
      // }
      // 清除符合要求的元素
      carry[node.getAttribute('data-id')]++;
      for (let i = 1; i < carry.length; i++) {
        if (carry[i] == 3) {
          // NodeList 遍历
          boxChilds.forEach(item => {
            if (item.getAttribute('data-id') == i) {
              item.remove();
            }
          })
          // HTMLCollection 遍历
          // for (let item of boxChilds) {
          //   console.log(item);
          //   if (item.getAttribute('data-id') == i) {
          //     item.remove();
          //   }
          // }
          carry[i] = 0;
        }
      }
    });
  </script>
</body>

</html>